<div id="header">
	<table class="mainlayout" align="center">
		<tr class="titlehead">
			<td colspan="5">
			<h1 >Create Team</h1>
			</td>
		</tr>
		<tr class="navigation">
			<td class="navigationselect">
			<h3> Step 1 </h3>
			</td>
			<td>
			<h3> Step 2 </h3>
			</td>
			<td>
			<h3> Step 3 </h3>
			</td>
			<td>
			<h3> Step 4 </h3>
			</td>
			<td>
			<h3> Step 5 </h3>
			</td>
		</tr>
	</table>

</div>

{% block content %}{% endblock %}
<div id="footer">

</div>
<style type="text/css">
.hide
{
  display:none;
}
</style>
<script type="text/javascript" src="http://cse.taylor.edu/~cos372f0901/intramurals/js/createTeam.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.dump.js.txt"></script>

<script type="text/javascript">
  showStep = function(e, fn) {
    var $div = $(e.target).parents('div');
    var $div2 = fn.apply($div);
    $($div).addClass('hide');
    $($div2).removeClass('hide');
  }

  $('.nextButton').click(function(e){  showStep(e, $.fn.next) } );
  $('.backButton').click(function(e){  showStep(e, $.fn.prev) } );
  
</script>

